<template>
  <div class="tab-container paintingBox" id="tabContainer">
    <div v-if="emptyImg">
      <div
        class="tab-item scrollable"
        v-for="(item, index) in imageData"
        :key="index"
        v-viewer="{ movable: false }"
      >
        <img v-lazy="getAvatar(item.image)" :data-source="getAvatarBig(item.image)" />
        <div class="mark" @click="copyText(item.prompt)">
          <div class="title">{{ item.prompt }}</div>
          <div class="markBom">
            <div class="markBomLef">
              <img :src="getAvatarBig(item.avatar)" alt="" v-if="item.avatar !== null" />
              <img src="@/assets/chatlogo.jpg" alt="" v-else />
              <div class="h3">{{ item.realname }}</div>
            </div>
            <div class="markBomRit">
              <i class="iconfont icon-bianji"></i>
              <div class="h3">复制</div>
            </div>
          </div>
        </div>
        <div class="downImg" @click="getDownImg(getAvatarBig(item.image))">
          <a-tooltip title="下载原图">
            <i class="iconfont icon-xiazai"></i>
          </a-tooltip>
        </div>
        <div class="downImg two" @click="handleAdd(index)">
          <a-tooltip title="海报">
            <i class="iconfont icon-tupian"></i>
          </a-tooltip>
        </div>
        <div class="downImg three" v-if="waterType === 'square'" @click="painTingSquareI(item, index)">
          <a-tooltip title="点赞">
            <i :class="['iconfont icon-dianzan', item.flag === 0 ? '' : 'active']">{{
              item.hits === null ? '0' : item.hits
            }}</i>
          </a-tooltip>
        </div>
        <div
          class="downImg three"
          @click="addCollect(item)"
          v-if="waterType === 'history' && (item.commit === false || item.commit === null)"
        >
          <a-tooltip title="分享至广场">
            <i class="iconfont icon-31shoucang"></i>
          </a-tooltip>
        </div>
      </div>
    </div>

    <div class="emptyBox" v-if="!emptyImg">
      <img class="session-logo" src="@assets/chat/empty.png" alt="" />
    </div>

    <!-- <div class="tab-item" v-for="(item, index) in pbList" :key="index">
         <img :src="item.url" />
    </div> -->
    <dis-poster-modal ref="modalForm" :posterObj="posterObj"></dis-poster-modal>
  </div>
</template>

<script>
import { getFileAccessHttpUrl, getAction } from '@/api/manage'
import DisPosterModal from './DisPosterModal'
export default {
  components: {
    DisPosterModal,
  },
  props: {
    imageData: {
      // 瀑布流的图片数组
      type: Array,
      required: true,
      default: () => {
        return []
      },
    },
    columnCount: {
      // 瀑布流要划分的列数
      type: Number,
      default: 5,
    },
    waterType: {
      type: String,
      default: 'square',
    },
  },
  data() {
    return {
      posterObj: {},
      tem_poll: null,
      emptyImg: true,
      //瀑布流数据
      pbList: [
        {
          url: 'https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641',
          title: '标题',
          content: '描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '35.00',
          sales_volume: '1221',
        },
        {
          url: 'https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641',
          title: '标题',
          content: '描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '35.00',
          sales_volume: '1221',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f',
          title: '标题',
          content:
            '描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '68.50',
          sales_volume: '281',
        },
        {
          url: 'https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641',
          title: '标题',
          content: '描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '35.00',
          sales_volume: '1221',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f',
          title: '标题',
          content:
            '描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '68.50',
          sales_volume: '281',
        },
        {
          url: 'https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641',
          title: '标题',
          content: '描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '35.00',
          sales_volume: '1221',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f',
          title: '标题',
          content:
            '描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '68.50',
          sales_volume: '281',
        },
        {
          url: 'https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641',
          title: '标题',
          content: '描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '35.00',
          sales_volume: '1221',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f',
          title: '标题',
          content:
            '描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分',
          money: '68.50',
          sales_volume: '281',
        },
        // {
        //   url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",
        //   title: "标题",
        //   content: "描述部分描述部分描述部分描述部分描述部分描述部分描述部分",
        //   money: "35.00",
        //   sales_volume: "1221",
        // },
        // {
        //   url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fphoto%2Fm%2Fpublic%2Fp2650049201.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664935370&t=d4bf3e4d352c277a1bdebfcc8fda959f",
        //   title: "标题",
        //   content:
        //     "描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分描述部分",
        //   money: "68.50",
        //   sales_volume: "281",
        // },
        // {
        //   url: "https://img1.baidu.com/it/u=2911909188,130959360&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=641",
        //   title: "标题",
        //   content: "描述部分描述部分描述部分描述部分描述部分描述部分描述部分",
        //   money: "35.00",
        //   sales_volume: "1221",
        // },
      ],
    }
  },
  watch: {
    imageData: {
      immediate: true,
      handler: function () {
        var that = this
        if (this.imageData.length === 0) {
          this.emptyImg = false
        } else {
          this.emptyImg = true
        }
        this.$nextTick(function () {
          setTimeout(() => {
            that.getClearInterval()
          }, 60000)
          that.waterFall('#tabContainer', '.tab-item')
        })
      },
    },
  },
  mounted() {
    this.$nextTick(function () {
      var that = this
      // 窗口变化自适应布局
      window.onresize = () => {
        return (() => {
          this.waterFall('#tabContainer', '.tab-item')
        })()
      }
      that.goSetIerVal()
    })
  },

  beforeDestroy() {
    console.log('清除定时器清除定时器清除定时器11111111111111111')
    //清除定时器
    this.getClearInterval()
  },
  methods: {
    // 点赞
    painTingSquareI(item, index) {
      getAction('/paintingsquare/api/click', { imageId: item.id })
        .then((res) => {
          console.log('res', res)
          if (res.success) {
            if (item.flag === 0) {
              this.$set(item, 'hits', item.hits + 1)
              this.$set(item, 'flag', 1)
              this.$message.success('点赞成功')
            } else {
              this.$set(item, 'hits', item.hits - 1)
              this.$set(item, 'flag', 0)
              this.$message.info('已取消点赞')
            }
          } else {
            this.$message.info(res.message)
          }
        })
        .catch((error) => {
          console.log('error', error)
          // 处理请求失败
        })
    },
    addCollect(item) {
      var that = this
      that.$confirm({
        title: '审核图片',
        content: '是否提交该图片上传至图片广场?',
        onOk: function () {
          let obj = {
            image: item.image,
            imageId: item.id,
          }
          that.$http
            .post('/imageapprove/api/submit', obj)
            .then((res) => {
              console.log('res', res)
              if (res.success) {
                that.$message.success('已提交该图片到绘画广场审核')
              } else {
                that.$message.info('管理员驳回意见(请重新生成):' + res.result)
              }
            })
            .catch((error) => {
              console.log('error', error)
            })
        },
      })
    },
    handleAdd(index) {
      this.posterObj = this.imageData[index]
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '海报'
      this.$refs.modalForm.disableSubmit = false
    },
    async getDownImg(data) {
      // 获取图片对象和画布对象
      const imgUrl = data
      const response = await fetch(imgUrl)
      const blob = await response.blob()
      // 创建下载链接
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = 'image.png'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      // 释放 Blob URL
      window.URL.revokeObjectURL(url)
    },
    //复制
    copyText(data) {
      const text = data // 要复制的文本内容
      const el = document.createElement('textarea')
      el.value = text
      document.body.appendChild(el)
      el.select()
      document.execCommand('copy')
      document.body.removeChild(el)
      this.$message.success('绘画描述文本已复制')
    },

    goSetIerVal() {
      this.getClearInterval()
      this.tem_poll = setInterval(this.waterFall, 1000)
    },
    getClearInterval() {
      var that = this
      clearInterval(that.tem_poll)
      that.tem_poll = null
    },
    getAvatar(img) {
      // console.log('getFileAccessHttpUrl(this.avatar())', getFileAccessHttpUrl(img),img)
      try {
        var imgStr = img.split('.')
        var imgSplit = imgStr[0] + '-thumbnail' + '.jpg'
      } catch {}

      // console.log("splitIMG",imgSplit)
      return getFileAccessHttpUrl(imgSplit)
    },
    getAvatarBig(img) {
      return getFileAccessHttpUrl(img)
    },
    /**
     * @param { string } wrapIdName    容器id(或class)名称
     * @param { string } contentIdName 容器中内容项id(或class)名称
     * @param { number } column        容器中内容展示列数 手机的话建议改为2
     * @param { number } columnGap     容器中 列 间隔距离 默认为20
     * @param { number } rowGap        容器中 行 间隔距离 默认为20
     */

    //瀑布流方法：通过拿到dom循环，给每一个dom添加对应的定位位置排列出瀑布流布局。
    //通过判断列的高度，来把下一个盒子放在最短的地方补上
    waterFall(wrapIdName, contentIdName, columns = this.columnCount, columnGap = 20, rowGap = 20) {
      // console.log("wrapIdName",wrapIdName,contentIdName)
      if (wrapIdName === undefined && contentIdName === undefined) {
        wrapIdName = '#tabContainer'
        contentIdName = '.tab-item'
      }
      // 获得内容可用宽度（去除滚动条宽度）
      const wrapContentWidth = document.querySelector(wrapIdName).offsetWidth - 8
      // console.log('wrapContentWidth', wrapContentWidth)
      // 间隔空白区域
      const whiteArea = (columns - 1) * columnGap

      // 得到每列宽度(也即每项内容宽度)
      const contentWidth = parseInt((wrapContentWidth - whiteArea) / columns)
      // console.log('contentWidth', contentWidth)
      // 得到内容项集合
      const contentList = document.querySelectorAll('.tab-item')
      // console.log('contentList', contentList)
      // 成行内容项高度集合
      const lineConentHeightList = []

      for (let i = 0; i < contentList.length; i++) {
        // 动态设置内容项宽度
        contentList[i].style.width = contentWidth + 'px'

        // 获取内容项高度
        const height = contentList[i].clientHeight

        if (i < columns) {
          // 第一行按序布局
          contentList[i].style.top = 0
          contentList[i].style.left = contentWidth * i + columnGap * i + 'px'

          // 将行高push到数组
          lineConentHeightList.push(height)
        } else {
          // 其他行
          // 获取数组最小的高度 和 对应索引
          let minHeight = Math.min(...lineConentHeightList)
          let index = lineConentHeightList.findIndex((listH) => listH === minHeight)

          contentList[i].style.top = minHeight + rowGap + 'px'
          contentList[i].style.left = (contentWidth + columnGap) * index + 'px'

          // 修改最小列的高度 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 行间距
          lineConentHeightList[index] += height + rowGap
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
/* 最外层大盒子 */
.tab-container {
  position: relative;
}
/* 每个小盒子 */
.tab-container .tab-item {
  position: absolute;
  height: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background: white;
  /* 元素不能中断显示 */
  break-inside: avoid;
  text-align: center;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  .mark {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    right: 0;
    bottom: -10px;
    opacity: 0;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    margin: 0 10px 10px 10px;
    border-radius: 8px;
    padding: 10px;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: off*/
      -webkit-box-orient: vertical;
      /* autoprefixer: on*/
      font-size: 12px;
      float: left;
      width: 100%;
      color: white;
    }
    .markBom {
      margin-top: 10px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .markBomLef {
        color: white;
        display: flex;
        align-items: center;
        .h3 {
          width: 50px;
          overflow: hidden;
          white-space: nowrap;
        }
        img {
          width: 28px;
          border-radius: 30px;
          margin-right: 5px;
        }
      }
      .markBomRit {
        display: flex;
        align-items: center;
        cursor: pointer;
        .h3 {
          margin-left: 5px;
        }
      }
    }
  }
  &:hover {
    img {
      transform: scale(1.1);
    }
    .mark {
      bottom: 0;
      opacity: 1;
    }
    .downImg {
      top: 5px;
      opacity: 1;
    }
  }
  .downImg {
    opacity: 0;
    transition: all 0.3s;
    position: absolute;
    top: -10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.3);
    width: 20px;
    height: 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    .iconfont {
      color: white;
    }
    &.two {
      right: 40px;
    }
    &.three {
      right: 70px;
      width: auto;
      .active {
        color: orange;
      }
    }
  }
}
.tab-container .tab-item img {
  width: 100%;
  height: auto;
  transition: all 0.3s;
}
/* 描述 */
.content {
  text-align: left;
  color: #5c5c5c;
  font-size: 14px;
  margin-top: 10px;
  padding: 0 10px 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
/* 价格和销量 */
.tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  margin: 10px 0;
}
.tipsRight {
  padding: 3px 7px;
  background-color: #ff9a00;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
}

.emptyBox {
  text-align: center;
  img {
    width: 25%;
  }
}

@media screen and (max-width: 767px) {
  .tab-container {
    .tab-item {
      .downImg {
        opacity: unset;
        top: 5px;
      }
      .mark {
        opacity: unset;
        bottom: 0;
        .markBom {
          display: none;
        }
      }
    }
  }
}
</style>
